<template>
  <div class="model-child">
      <div class="model">
          <div class="model-title">
              <h2>服务资源</h2>
          </div>
          <div class="model-echart">
              <div class="map-panel">
                  <div class="map" id="allmap"></div>
                  <Select class="select" :model.sync="model1" placeholder="请选择服务机构" @on-change="typeChange">
                      <Option v-for="item in type" :value="item.label" :key="item.label">{{ item.label }}</Option>
                  </Select>
                  <!--<Select class="select" :model.sync="model2" placeholder="请选择范围">
                       <Option v-for="item in list" :value="item.value">{{ item.label }}</Option>
                   </Select>-->
              </div>
              <div class="service-panel">
                  <div class="service-item" v-for="item in serviceList">
                      <p class="type">{{item.type}}</p>
                      <div class="info">
                          <p>{{item.name}}</p>
                          <p class="address">地址：{{item.address}}</p>
                      </div>
                  </div>
                  <!--<div class="service-item" v-for="item in serviceList">
                      <p class="type">{{item.type}}</p>
                      <div class="info">
                          <p>{{item.name}}</p>
                          <p class="address">地址：{{item.address}}</p>
                      </div>
                  </div>-->
              </div>
          </div>
      </div>
  </div>
</template>
<script>
    import { Select, Option } from 'view-design'
    import { getServiceList } from '@/api/park.js'

export default {
    components: {
        Select,
        Option
    },
    data() {
        return {
            form: {
                year: ''
            },
            echartPieData: {
                x: [],
                y: []
            },
            echartBarData: {
                x: [],
                y: []
            },
            parktopBarChart: '',
            parklistPieChart: '',
            model1: '',
            model2: '',
            list: [{
                label: 100,
                value: 100
            }, {
                label: 200,
                value: 200
            }, {
                label: 300,
                value: 400
            }],
            type: [{
                label: 'CMO机构'
            }, {
                label: '认证机构'
            }, {
                label: '动物实验'
            }, {
                label: '临床机构'
            }, {
                label: 'CDMO机构'
            }, {
                label: 'CRO机构'
            }, {
                label: '检测机构'
            }],
            serviceList: [],
            swiperOption: {
                freeMode: true,
                loop: true,
                direction: 'vertical',
                speed: 1500,
                //自动轮播
                autoplay: true,
                delay: 0,
                autoplayDisableOnInteraction: false,
                //开启循环模式
                autoHeight: true,
                slidesPerView: 6
            },
        }
    },
    computed: {
        lal() {
            return this.$store.state.app.lal
        }
    },
    mounted() {
        this.initMap()
        this.typeChange()
    },
    methods: {
        initMap() {
            const lal = this.lal
            const map = new BMapGL.Map("allmap");    // 创建Map实例
            const marker = new BMapGL.Marker(new BMapGL.Point(lal[0], lal[1])); // 创建点
            map.centerAndZoom(new BMapGL.Point(lal[0], lal[1]), 18);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(false);     //开启鼠标滚轮缩放
            map.setHeading(64.5);
            map.setTilt(73);
            map.addOverlay(marker);
        },
        async typeChange(e = '') {
            this.serviceList = await getServiceList({type: e})
        }
    },
    watch: {
        '$store.state.app.year': {
            handler: function (nVal, oVal) {
                this.form.year = nVal
                // this.getPartCount(this.form)
            },
            immediate: true
        }

    }
}
</script>
<style scoped lang="scss">
.model-child {
    display: flex;
    margin: 1vw 0;

    .model {
        flex: 1;
    }
}

.model {
    padding: .4vw;
    background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
    background-size: 100% auto;
}

#parktop, #parkList {
    width: 100%;
    height: 27vw;
}

.model-title {
    padding: screenVw(1) 0 0;

    h2 {
        text-align: center;
        color: #78dffd;
        font-size: screenVw(1.2);
    }
}

.model-echart {
    padding: screenVw(0.5) 0;

    .map-panel {
        width: 100%;
        height: 15vw;
        position: relative;

        .map {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .select {
            position: absolute;
            right: 0.3vw;
            top: 0.6vw;
            z-index: 11;
            width: 9.5vw;

            &.select1 {
                width: 8.8vw;
                right: 8vw;
            }

            /deep/ .ivu-select-selection {
                height: 1.8vw;

                .ivu-select-placeholder {
                    color: #555;
                }

                .ivu-select-selected-value,.ivu-select-placeholder {
                    height: 1.7vw;
                    line-height: 1.7vw;
                    font-size: 1vw;
                }

                .ivu-select-arrow {
                    right: 0.4vw;
                    font-size: 1vw;
                }

                .ivu-select-item {
                    font-size: 1vw;
                }
            }
        }
    }

    .service-panel {
        margin-top: 0.5vw;
        width: 100%;
        height: 11vw;
        overflow-y: scroll;

        .service-swiper {
            height: 11vw;
        }

        .service-item {
            display: flex;
            justify-content: space-between;
            color: #50EEFF;
            font-size: 0.9vw;
            padding: .4vw .6vw;
            cursor: pointer;
            height: auto !important;

            .type {
                width: 20%;
                flex-shrink: 0;
            }

            .info {
                width: 78%;
                margin-left: 2%;
                display: flex;
                flex-direction: column;

                .address {
                    font-size: 0.8vw;
                }
            }
        }
    }
}
</style>
